<template>
  <div class="signup-page">
    <GetBioJobNavbar />
    
    <div class="signup-container">
      <div class="signup-left">
        <div class="left-content">
          <div class="logo-large">
            <div class="logo-icon-large">X</div>
            <span class="logo-text-large">BioTalent AI</span>
          </div>
          <h1 class="left-title">Join the Future of Biopharma Careers</h1>
          <p class="left-description">
            Empowering biopharma professionals with the most precise, up-to-date, and industry-specific career tools.
          </p>
          <ul class="feature-list">
            <li class="feature-list-item">
              <i class="el-icon-check"></i>
              <span>AI-powered job matching</span>
            </li>
            <li class="feature-list-item">
              <i class="el-icon-check"></i>
              <span>Industry-specific insights</span>
            </li>
            <li class="feature-list-item">
              <i class="el-icon-check"></i>
              <span>Expert career guidance</span>
            </li>
          </ul>
        </div>
      </div>
      
      <div class="signup-right">
        <div class="signup-form-container">
          <h2 class="form-title">Create your account</h2>
          <p class="form-subtitle">Get started with your biopharma career journey</p>
          
          <div class="social-buttons">
            <el-button class="social-button google" @click="signInWithGoogle">
              <span class="social-icon">G</span>
              Continue with Google
            </el-button>
            <el-button class="social-button linkedin" @click="signInWithLinkedIn">
              <span class="social-icon">in</span>
              Continue with LinkedIn
            </el-button>
          </div>
          
          <div class="divider">
            <span>Or sign up with email</span>
          </div>
          
          <el-form :model="signupForm" :rules="formRules" ref="signupFormRef" class="signup-form">
            <el-form-item prop="fullName">
              <el-input
                v-model="signupForm.fullName"
                placeholder="Enter your full name"
                size="large"
              ></el-input>
            </el-form-item>
            <el-form-item prop="email">
              <el-input
                v-model="signupForm.email"
                placeholder="Enter your email"
                size="large"
              ></el-input>
            </el-form-item>
            <el-form-item prop="password">
              <el-input
                v-model="signupForm.password"
                type="password"
                placeholder="Min. 8 characters"
                size="large"
              ></el-input>
              <p class="password-hint">Must be at least 8 characters</p>
            </el-form-item>
            <el-form-item prop="confirmPassword">
              <el-input
                v-model="signupForm.confirmPassword"
                type="password"
                placeholder="Confirm your password"
                size="large"
              ></el-input>
            </el-form-item>
            <el-form-item>
              <el-checkbox v-model="signupForm.agreeToTerms">
                I agree to the <a href="#">Terms of Service</a> and <a href="#">Privacy Policy</a>
              </el-checkbox>
            </el-form-item>
            <el-form-item>
              <el-button type="primary" size="large" class="signup-button" @click="handleSignup">
                Sign Up
              </el-button>
            </el-form-item>
          </el-form>
          
          <p class="login-link">
            Already have an account? <nuxt-link to="/sign-in">Sign in</nuxt-link>
          </p>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'SignUpPage',
  data() {
    const validatePassword = (rule, value, callback) => {
      if (value.length < 8) {
        callback(new Error('Password must be at least 8 characters'))
      } else {
        callback()
      }
    }
    const validateConfirmPassword = (rule, value, callback) => {
      if (value !== this.signupForm.password) {
        callback(new Error('Passwords do not match'))
      } else {
        callback()
      }
    }
    
    return {
      signupForm: {
        fullName: '',
        email: '',
        password: '',
        confirmPassword: '',
        agreeToTerms: false
      },
      formRules: {
        fullName: [
          { required: true, message: 'Please enter your full name', trigger: 'blur' }
        ],
        email: [
          { required: true, message: 'Please enter your email', trigger: 'blur' },
          { type: 'email', message: 'Please enter a valid email', trigger: 'blur' }
        ],
        password: [
          { required: true, message: 'Please enter a password', trigger: 'blur' },
          { validator: validatePassword, trigger: 'blur' }
        ],
        confirmPassword: [
          { required: true, message: 'Please confirm your password', trigger: 'blur' },
          { validator: validateConfirmPassword, trigger: 'blur' }
        ]
      }
    }
  },
  methods: {
    handleSignup() {
      this.$refs.signupFormRef.validate((valid) => {
        if (valid) {
          if (!this.signupForm.agreeToTerms) {
            this.$message.warning('Please agree to the Terms of Service and Privacy Policy')
            return
          }
          // Set auth token (in real app, this would come from API response)
          localStorage.setItem('auth_token', 'demo_token_' + Date.now())
          this.$message.success('Account created successfully!')
          this.$router.push('/my-account')
          // Refresh navbar
          window.location.reload()
        }
      })
    },
    signInWithGoogle() {
      this.$message.info('Google sign in coming soon')
    },
    signInWithLinkedIn() {
      this.$message.info('LinkedIn sign in coming soon')
    }
  }
}
</script>

<style scoped>
.signup-page {
  min-height: 100vh;
  background-color: #fff;
}

.signup-container {
  display: grid;
  grid-template-columns: 40% 60%;
  min-height: calc(100vh - 64px);
}

.signup-left {
  background-color: #1a1a1a;
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 40px;
}

.left-content {
  max-width: 400px;
}

.logo-large {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 40px;
}

.logo-icon-large {
  width: 48px;
  height: 48px;
  background-color: #409eff;
  color: #fff;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 24px;
  font-weight: bold;
}

.logo-text-large {
  font-size: 24px;
  font-weight: bold;
  color: #fff;
}

.left-title {
  font-size: 32px;
  font-weight: bold;
  color: #fff;
  margin-bottom: 24px;
}

.left-description {
  font-size: 16px;
  color: #ccc;
  line-height: 1.6;
  margin-bottom: 32px;
}

.feature-list {
  list-style: none;
  padding: 0;
  margin: 0;
}

.feature-list-item {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 16px;
  color: #fff;
  font-size: 16px;
}

.feature-list-item i {
  width: 24px;
  height: 24px;
  background-color: #409eff;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-size: 14px;
}

.signup-right {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 40px;
  background-color: #fff;
}

.signup-form-container {
  max-width: 400px;
  width: 100%;
}

.form-title {
  font-size: 28px;
  font-weight: bold;
  color: #000;
  margin-bottom: 8px;
}

.form-subtitle {
  font-size: 14px;
  color: #666;
  margin-bottom: 32px;
}

.social-buttons {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-bottom: 24px;
}

.social-button {
  width: 100%;
  padding: 12px;
  border: 1px solid #e5e5e5;
  background-color: #fff;
  color: #000;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}

.social-icon {
  width: 24px;
  height: 24px;
  border-radius: 4px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: bold;
  font-size: 12px;
}

.social-button.google .social-icon {
  background-color: #4285f4;
  color: #fff;
}

.social-button.linkedin .social-icon {
  background-color: #0077b5;
  color: #fff;
}

.divider {
  text-align: center;
  margin: 24px 0;
  position: relative;
}

.divider::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 0;
  right: 0;
  height: 1px;
  background-color: #e5e5e5;
}

.divider span {
  background-color: #fff;
  padding: 0 16px;
  position: relative;
  color: #999;
  font-size: 14px;
}

.signup-form {
  margin-top: 24px;
}

.password-hint {
  font-size: 12px;
  color: #999;
  margin-top: 4px;
  margin-bottom: 0;
}

.signup-button {
  width: 100%;
  background-color: #000;
  color: #fff;
  border: none;
  padding: 14px;
  font-size: 16px;
}

.login-link {
  text-align: center;
  margin-top: 24px;
  color: #666;
  font-size: 14px;
}

.login-link a {
  color: #409eff;
  text-decoration: none;
}

@media screen and (max-width: 968px) {
  .signup-container {
    grid-template-columns: 1fr;
  }
  
  .signup-left {
    display: none;
  }
}
</style>

